<template>
  <div style="height: 600px">
    <el-table
        :data="list" border style="width: 100%" >
      <el-table-column prop="id" label="id" width="180">
      </el-table-column>
      <el-table-column prop="room_name" label="教室" width="180">
      </el-table-column>
      <el-table-column prop="username" label="教师">
      </el-table-column>
      <el-table-column prop="stu_count" label="学生数量">
      </el-table-column>
      <el-table-column prop="max_account" label="最大人数">
      </el-table-column>
      <el-table-column label="操作" #default="scope">
        <el-button v-if="scope.row.is_full === 0 && !appointList.includes(scope.row.id)" @click="goAppointment(scope.row)" type="primary">预约</el-button>
        <el-button v-else-if="scope.row.is_full === 1" type="info" disabled>人数已满</el-button>
        <el-button v-else type="info" disabled>已预约</el-button>
      </el-table-column>
    </el-table>

    <el-dialog
        title="选择时间"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div class="block">
        <el-date-picker
            v-model="time" type="date" placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"
            :picker-options="expireTimeOption">
        </el-date-picker>
        <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="setStartTime">
        </el-time-select>
        <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="setEndTime">
        </el-time-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {IP} from "@/config";
import axios from "axios";
import {readonly} from "vue";
import moment from 'moment'

export default {
  data(){
    return {
      info:{},
      list: [],
      appointList:[],
      appointment:{},
      dialogVisible:false,
      time:'',
      startTime: '',
      endTime: '',
      setStartTime:{
        start: '08:00',
        step: '24:00',
        end: '24:00',
        readonly
      },
      setEndTime:{
        start: '22:00',
        step: '24:00',
        end: '24:00',
        readonly,
        minTime: this.startTime
      },
      expireTimeOption: {
        disabledDate(time) {
          const times = new Date(new Date().toLocaleDateString()).getTime() +  2 * 8.64e7 - 1
          return time.getTime() < Date.now()|| time.getTime() > times
        }
      },

    }
  },
  methods:{
    goAppointment(room){
      this.appointment = {
        userId:this.info.id,
        roomId:room.id,
        state:0
      }
      console.log(this.appointment)
      this.dialogVisible = true
    },
    submit(){
      this.appointment["beginTime"] = moment(this.time +" "+ this.startTime).format("YYYY-MM-DD HH:mm:ss");
      this.appointment["endTime"] = moment(this.time +" "+ this.endTime).format("YYYY-MM-DD HH:mm:ss");
      console.log(this.appointment)
      let url = IP + "appointment/add"
      axios.post(url,this.appointment).then(res => {
        console.log('请求成功')
        console.log(res)
        if (res.data.code === 0) {
          this.$message({
            message: res.data.data.status,
            type: 'success'
          });
        } else {
          this.$message.error(res.data.data.status);
        }
        this.$router.go(0)

      }).catch(error => {
        console.log('请求失败')
        console.log(error)
        this.$message.error('请求失败');
      })

      this.dialogVisible = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(a => {
            console.log(a)
            done();
          })
          .catch(b => {
            console.log(b)
          });
    }
  },
  mounted() {
    this.info = JSON.parse(sessionStorage.getItem("info"))
    let url = IP + "room/getAll"
    axios.post(url).then(res =>{
      res.data.data.roomList.forEach((item,index)=>{
        this.list.splice(index,0,item[index+1])
      })
    }).catch(error => {
      console.log('请求失败')
      console.log(error)
    })

    url = IP + "appointment/getAppointRoom"
    axios.post(url,this.info).then(res =>{
      if(res.data.code == 0){
        this.appointList = res.data.data.appointRoom
      }
      console.log(res)
    }).catch(error => {
      console.log('请求失败')
      console.log(error)
    })

  }
}
</script>

<style scoped>

</style>